Small Apllication in JavaScript

  • What is Small Application ?

    • A small application in JavaScript is a simple, self-contained program that performs a specific task or set of tasks. These applications are often used to demonstrate basic concepts, such as event handling, DOM manipulation, and data processing. They are typically easy to understand and implement, making them excellent for learning and teaching purposes.
    Here are some examples of small applications that can be built using JavaScript:

  • importance of small application in javascript :

    • Small applications in JavaScript hold significant importance for several reasons:
    Learning and Practice : Building small applications provides an excellent opportunity for beginners to practice JavaScript concepts and deepen their understanding of programming fundamentals.
    Rapid Prototyping : JavaScript is well-suited for rapid prototyping due to its flexibility and ease of use.
    Portfolio Building : Small applications serve as valuable additions to a developer's portfolio, showcasing their skills, creativity, and ability to deliver functional solutions.
    Demonstration and Training : Small applications are useful for demonstrations, tutorials, and training purposes.
    Personal Satisfaction : Building small applications can be personally rewarding and fulfilling. It allows developers to see tangible results of their efforts, overcome challenges, and create something useful or enjoyable, fostering a sense of accomplishment and motivation to continue learning and growing.

  • examples of small applications :

  • Hash Property :

    • The hash property sets or returns the anchor part of the href attribute value.

    JavaScript code
    <!DOCTYPE html> <html> <head> <title>dd array</title> </head> <body> <p><a id="A" href="https://javapba.blogspot.com/p/loop.html#pbainst">Java loop Programs</a></p> <p id="d"></p> <button onclick="myFunction()">CLICK</button> <script> function myFunction() { var x = document.getElementById("A").hash; document.getElementById("d").innerHTML = x; } </script> </body> </html>

    Output :
    #pbainst

  • To display the hostname :

    • The host property sets or returns the hostname and port part of the href attribute value.

    JavaScript code
    <html> <body> <p><a id="myAnchor" href="https://javapba.blogspot.com/p/loop.html">Example link</a></p> <button onclick="myFunction()">CLICK</button> <p id="d"></p> <script> function myFunction() { var x = document.getElementById("myAnchor").host; document.getElementById("d").innerHTML = x; } </script> </body> </html>

    Output :
    javapba.blogspot.com

  • To get the URL of a link :
    • JavaScript code
    <html> <body> <a id="A" href="https://javapba.blogspot.com/">Java Tutorials</a> <button onclick="myFunction()">Try it</button> <p id="d"></p> <script> function myFunction() { var x = document.getElementById("A").href; document.getElementById("d").innerHTML = x; } </script> </body> </html>

    Output :
    https://javapba.blogspot.com/

  • To display the port number of a link :
    • JavaScript code
    <html> <body> <p><a id="A" href="http://www.example.com:4097/test.htm#part2">Example link</a></p> <button onclick="myFunction()">Try</button> <p id="d"></p> <script> function myFunction() { var x = document.getElementById("A").port; document.getElementById("d").innerHTML = x; } </script> </body> </html>

    Output :
    4097

  • To Display the username part of a link
    • JavaScript code
    <html> <body> <p><a id="A" href="https://shibshankar:ghosh@www.example.com">Example link</a></p> <button onclick="myFunction()">Try it</button> <p id="d"></p> <script> function myFunction() { var x = document.getElementById("A").username; document.getElementById("d").innerHTML = x; } </script> </body> </html>

    Output :
    shibshankar

  • To Set the text color of a address :
    • JavaScript code
    <html> <body> <address id="A"> PBA INSTITUTE<br> HOWRAH NEAR KOLKATA<br> CALL: 9239412412 </address> <br> <button onclick="F()">CLICK</button> <script> function F() { var x = document.getElementById("A"); x.style.color = "tomato"; } </script> </body> </html>

    Output :

    PBA INSTITUTE
    HOWRAH NEAR KOLKATA
    CALL: 9239412412

  • Draw a rectangular shape :
    • JavaScript code
    <html> <head> <title>Draw a rectangular shape</title> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> <script type="text/javascript"> function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var context = canvas.getContext('2d'); context.fillRect(20,20,100,100); context.clearRect(20,20,60,60); context.strokeRect(45,45,50,50); } } </script> </html>

    Output :

  • Draw a Face :

    • JavaScript code
    <!DOCTYPE html> <html> <head> <title></title> </head> <body onload="draw();"> <canvas id="canvas" width="250" height="250"></canvas> </body> <script type="text/javascript"> function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var context = canvas.getContext('2d'); context.beginPath(); // Outer circle context.arc(75,75,50,0,Math.PI*2,true); context.moveTo(110,75); // Mouth context.arc(75,75,35,0,Math.PI,false); // Lefy and Right eye context.moveTo(55,65); context.arc(60,65,5,0,Math.PI*2,true); context.arc(90,65,5,0,Math.PI*2,true); context.stroke(); } } </script> </html>

    Output :

  • Conclusion

    • Small applications in JavaScript play a crucial role in the learning process, software development lifecycle, and professional growth of developers. They serve as building blocks for larger projects and provide valuable experience that can be applied across a variety of domains and industries.

    Javascript All Chapters
    introduction user input if else loops Number Pattern array 2d array switch case Function string function Math function date time function class constructor Inheritance Regular Expression small application events real life